<template>
	<view class="list-container">
		<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
		<view class="list" v-for="item in list" :key="item.id"  @click.stop="goDetails(item)">
			<view class="main-container">
				<view class="left-img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="right-container">
					<view class="top">
						<view class="name">
							<!-- <view class="vip">
								
							</view> -->
							<view class="thing"  v-if="myType == 1">
								{{item.name}} {{item.status == 1?'':' （已下架）'}}
							</view>
							<view class="thing"  v-if="myType == 2">
								{{item.name}} 
							</view>
						</view>
						<view class="dolor" v-if="myType == 1">
							需要<text class="sum">{{item.num}}</text>株
						</view>
						<view class="dolor" v-if="myType == 2">
							<text class="sum">￥{{item.price}}元</text>/株
						</view>
					</view>
					<view class="content">
						<view class="content-top">
							<view class="bx" v-if="item.newSpe[0].value">
								{{item.newSpe[0].name}}：<text class="blue">{{item.newSpe[0].value}}</text>{{item.newSpe[0].unit}}
							</view>
							<view class="gf" v-if="item.newSpe[1].value">
									{{item.newSpe[1].name}}：<text class="blue">{{item.newSpe[1].value}}</text>{{item.newSpe[1].unit}}
							</view>
							<view class="gd" v-if="item.newSpe[2].value">
								{{item.newSpe[2].name}}：<text class="blue">{{item.newSpe[2].value}}</text>{{item.newSpe[2].unit}}
							</view>
						</view>
						<view class="center">
							<view class="jp" v-if="item.newSpe[3].value">
								{{item.newSpe[3].name}}：<text class="blue">{{item.newSpe[3].value}}</text>{{item.newSpe[3].unit}}
							</view>
							<view class="wz" v-if="myType == 1">
								等级：{{item.lvl_name}}
							</view>
							<view class="empt">
							</view>
						</view>
					</view>
					<view class="intro">
					<!-- 	{{item.introduction}} -->
					</view>
				</view>
			</view>
			<view class="list-bottom">
				<view class="liulan">
					{{item.address}}
				</view>
				<view class="ck" v-if="myType == 2" @click.stop="goDetails(item)">
					查看
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<view class="list-bottom" v-if="myType == 1">
				<!-- <view class="liulan">
					{{item.address}}
				</view> -->
				<view class="ck"  @click.stop="goUpload(item.id)">
					编辑
				</view>
				<view class="ck" @click.stop="wantSubDel(item.id)">
					删除
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		wantSubDel,
	} from '@/request/api.js'
	export default {
		props:{
			list:{
				type:Array,
				default:[]
			},
			myType:{
				type:Number,
				default:1
			}
		},
		data() {
			return {

			};
		},
		onShow() {
			conole.log(this.type)
		},
		onLoad() {
			console.log('222')
		},
		created() {
			// console.log('222')
		},
		methods:{
			wantSubDel(e){
				console.log('删除')
				wantSubDel({
					id:e
				}).then(res => {
					if (res.code == 1) {
						this.$refs.uToast[0].show({
							type: 'success',
							title: '删除成功',
							message: "删除成功",
						})
						setTimeout(()=>{
							this.$emit('subdel','subdel')
						},1000)
						
					}
				})
			},
			goUpload(e){
				console.log(e,'编辑')
				uni.navigateTo({
					url:`/my_pages/myWant/wantEdit?id=${e}&from=buy`
				})
			},
			goDetails(item){
				uni.navigateTo({
					url:`/my_pages/myWant/wantDetails?type=${this.myType}&data=`+JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-bottom: 15rpx;
		box-shadow: 2px 3px 7px #807e7e4f;
		border-radius: 13rpx;
		.blue{
			color: #00C777
		}
		.main-container {
			height: 160rpx;
			display: flex;
			padding: 0 20rpx;
			background: #fff;
			font-size: 22rpx;
			padding: 12rpx 0;
			border-bottom: 1px solid #E2E2E2;
			margin: 15rpx;

			.left-img {
				width: 160rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.right-container {
				flex: 1;
				font-size: 22rpx;
				width: 100%;

				.top {
					display: flex;
					border-bottom: 1px solid #E2E2E2;
					justify-content: center;
					align-items: center;
					margin: 0rpx 15px;
					padding: 0rpx 0 10rpx 0;

					.name {
						flex: 1;
						color: #00C777;
						display: flex;

						.vip {
							background: #00C777;
							color: #fff;
							border-radius: 25rpx;
							padding: 0 15rpx;
							margin-right: 15rpx;
						}
					}

					.dolor {
						color: #00C777;

						.sum {
							color: #FFAB68;
						}
					}
				}

				.content {
					display: flex;
					flex-direction: column;
					margin: 0rpx 15px;
					padding: 0rpx 0 10rpx 0;

					.content-top {
						display: flex;
						margin: 15rpx 0px;

						.bx,
						.gf,
						.gd {
							width: 33.33%;
						}
					}

					.center {
						display: flex;

						.jp,
						.wz,
						.empt {
							width: 33.33%;
						}

						.jp {
							// color: #00C777;
						}

						.wz {
							color: #FFAB68;
						}

					}

					.intro {
						color: #C9C9C9;
					}
				}

				.intro {
					margin: 0rpx 15px;
					padding: 0rpx 0 10rpx 0;
					color: #C9C9C9;
					width: 220px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}
			}
		}

		.list-bottom {
			margin: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #4F4F4F;

			.liulan {
				flex: 1;
			}

			.ck {
				width: 70px;
				color: #fff;
				background-color: #00C777;
				text-align: center;
				border-radius: 26rpx;
				padding: 5rpx 0;
			}
		}
	}
</style>
